<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用商店</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
            'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .animate-float {
        animation: float 3s ease-in-out infinite;
      }
      .backdrop-blur-sm {
        backdrop-filter: blur(4px);
      }
    }
  </style>
  
  <style>
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-neutral-200 transition-all duration-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <div class="bg-primary text-white p-2 rounded-lg">
            <i class="fa fa-store text-xl"></i>
          </div>
          <span class="text-xl font-bold text-neutral-700">应用商店</span>
        </div>
        
        <!-- 搜索栏 (中等屏幕及以上) -->
        <div class="hidden md:flex flex-1 max-w-xl mx-8">
          <div class="relative w-full">
            <input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
          </div>
        </div>
        
        <!-- 导航链接 -->
        <nav class="hidden md:flex items-center space-x-6">
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">首页</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">分类</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">排行榜</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">推荐</a>
        </nav>
        
        <!-- 用户操作 -->
        <div class="flex items-center space-x-4">
          <button class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors">
            <i class="fa fa-search text-neutral-600"></i>
          </button>
          <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
            <i class="fa fa-user-circle text-neutral-600 text-xl"></i>
          </button>
          <button class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors" id="mobile-menu-button">
            <i class="fa fa-bars text-neutral-600"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden h-0 overflow-hidden transition-all duration-300" id="mobile-menu">
      <div class="px-4 py-3 space-y-3 border-t border-neutral-200">
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">首页</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">分类</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">排行榜</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">推荐</a>
        <div class="relative">
          <input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 应用列表页 -->
    <section id="app-list" class="space-y-8">
      <!-- 轮播图 -->
      <div class="relative rounded-2xl overflow-hidden shadow-lg h-[200px] md:h-[300px] lg:h-[400px]">
        <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/50 z-10"></div>
        <img src="https://picsum.photos/id/1/1200/600" alt="精选应用" class="w-full h-full object-cover">
        <div class="absolute inset-0 z-20 flex flex-col justify-center px-6 md:px-12">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-2">发现精彩应用</h1>
          <p class="text-white/90 max-w-xl text-[clamp(1rem,1.5vw,1.25rem)] mb-6">探索精选应用，让生活更便捷、更有趣</p>
          <button class="bg-white text-primary px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 w-fit">
            浏览全部应用
          </button>
        </div>
      </div>
      
      <!-- 分类标签 -->
      <div class="overflow-x-auto scrollbar-hide">
        <div class="flex space-x-2 pb-2 min-w-max">
          <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">全部</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">效率工具</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">游戏娱乐</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">社交沟通</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">影音视听</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">学习教育</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">生活服务</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">摄影美化</button>
        </div>
      </div>
      
      <!-- 应用列表 -->
      <div id="app-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 应用卡片将通过JavaScript动态加载 -->
      </div>
      
      <!-- 加载更多按钮 -->
      <div class="text-center mt-8">
        <button id="load-more" class="px-6 py-3 bg-white border border-neutral-200 rounded-full text-neutral-700 font-medium hover:bg-neutral-50 transition-colors">
          加载更多 <i class="fa fa-angle-down ml-1"></i>
        </button>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 py-8 mt-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <div class="bg-primary text-white p-2 rounded-lg">
              <i class="fa fa-store text-xl"></i>
            </div>
            <span class="text-xl font-bold text-neutral-700">应用商店</span>
          </div>
          <p class="text-sm text-neutral-600 mb-4">发现精彩应用，让生活更便捷、更有趣</p>
          <div class="flex space-x-4">
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-facebook"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-youtube"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">分类浏览</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">排行榜</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">最新上架</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">推荐应用</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">支持</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">帮助中心</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">常见问题</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">联系我们</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">开发者支持</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">隐私政策</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">订阅更新</h4>
          <p class="text-sm text-neutral-600 mb-4">订阅我们的通讯，获取最新应用和独家优惠</p>
          <div class="flex">
            <input type="email" placeholder="你的邮箱地址" class="flex-1 px-4 py-2 border border-neutral-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
            <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
              订阅
            </button>
          </div>
        </div>
      </div>
      
      <div class="border-t border-neutral-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-sm text-neutral-600">&copy; 2025 应用商店. 保留所有权利.</p>
        <div class="flex space-x-6 mt-4 md:mt-0">
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">服务条款</a>
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">隐私政策</a>
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">Cookie 设置</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    mobileMenuButton.addEventListener('click', () => {
      if (mobileMenu.classList.contains('h-0')) {
        mobileMenu.classList.remove('h-0');
        mobileMenu.classList.add('h-auto');
      } else {
        mobileMenu.classList.add('h-0');
        mobileMenu.classList.remove('h-auto');
      }
    });
    
    // 加载应用列表
    function loadAppList() {
      const appGrid = document.getElementById('app-grid');
      
      // 模拟从API获取数据
      fetch('/api/apps')
        .then(response => response.json())
        .then(data => {
          appGrid.innerHTML = '';
          
          data.forEach(app => {
            const card = document.createElement('div');
            card.className = 'bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer';
            card.setAttribute('data-app-id', app.id);
            
            card.innerHTML = `
              <div class="relative h-48 overflow-hidden">
                <img src="${app.coverImage}" alt="${app.name}截图" class="w-full h-full object-cover">
                <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
                  <i class="fa fa-star mr-1"></i>${app.rating}
                </div>
              </div>
              <div class="p-4">
                <div class="flex items-center space-x-3 mb-3">
                  <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                    <img src="${app.icon}" alt="${app.name}图标" class="w-full h-full object-cover">
                  </div>
                  <div>
                    <h3 class="font-bold text-neutral-700">${app.name}</h3>
                    <p class="text-xs text-neutral-500">${app.category}</p>
                  </div>
                </div>
                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">${app.description}</p>
                <div class="flex justify-between items-center">
                  <span class="text-xs text-neutral-500">${app.downloads} 下载</span>
                  <span class="bg-${app.priceType === 'free' ? 'primary' : 'secondary'}/10 text-${app.priceType === 'free' ? 'primary' : 'secondary'} px-3 py-1 rounded-full text-xs font-medium">
                    ${app.priceType === 'free' ? '免费' : '内购'}
                  </span>
                </div>
              </div>
            `;
            
            card.addEventListener('click', () => {
              window.location.href = `/detail?id=${app.id}`;
            });
            
            appGrid.appendChild(card);
          });
        })
        .catch(error => {
          console.error('Error loading app list:', error);
          appGrid.innerHTML = '<div class="col-span-full text-center py-12">加载应用列表失败，请稍后再试。</div>';
        });
    }
    
    // 加载更多应用
    document.getElementById('load-more').addEventListener('click', () => {
      // 这里应该实现分页加载逻辑
      alert('加载更多功能将在后续版本中实现');
    });
    
    // 导航栏滚动效果
    const header = document.querySelector('header');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > 50) {
        header.classList.add('shadow-md');
      } else {
        header.classList.remove('shadow-md');
      }
      
      lastScrollTop = scrollTop;
    });
    
    // 页面加载完成后加载应用列表
    document.addEventListener('DOMContentLoaded', loadAppList);
  </script>
</body>
</html>
    